<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TPlayer</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--hls-->
    <script src="https://cdn.bootcss.com/hls.js/0.8.8/hls.min.js"></script>
    <!--flv-->
    <script src="https://cdn.bootcss.com/flv.js/1.3.3/flv.min.js"></script>

    <script src="dist/tplayer.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css">
        .header{
            text-align: center;
        }
        .header>.titile{
            color: #fff;
        }
        .tp-video-warp{
            position: relative;
            height: 517px;
            width: 922px;
            margin: 0 auto;
            z-index: 5;
        }
        .introduction{
            width: 922px;
            color: #fff;
            margin: 20px auto 20px auto;
        }
        .introduction>a{
            color: #fff;
            text-decoration:none;
        }
        .tp-video{
            margin-bottom: -4px;
        }
        body {
            background-color:#000;
        }
        #v-dom2{
            min-width: 200px;
        }
        /*.tp-video-con{
            opacity: 1!important;
        }*/
        @media screen and (max-width: 910px) {
            body{
                background-color:lightblue;
            }
            .tp-video-warp{
                width: 100%;
            }
            .introduction{
                width: auto;
            }

        }
    </style>
</head>
<body>
<header class="header">

</header>
<div id="v-dom"></div>


<script type="text/javascript">

    var v1=new Tplayer({
        Element:'#v-dom',
        video:{
            url:["http://localhost:8080/yourname.mp4"],
            pic:"https://ooo.0o0.ooo/2017/04/27/590166d5436e9.jpg",
            type:'mp4'
        },
        //danmakuapi:"https://api.haotown.cn/danmaku/",
        danmakuid:1
    });
    v1.add("dsfdf");
    v1.addonedanmaku('400096.danmakus');
    // v1.addonedanmaku('525841.danmakus');

</script>

</body>
</html>